<template>
  <div>
    <!--  首部小导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/mine' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>绑定手机</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--  步骤条-->
    <el-steps :active="active" finish-status="success">
      <el-step title="验证身份"></el-step>
      <el-step title="绑定新手机"></el-step>
      <el-step title="绑定成功"></el-step>
    </el-steps>
    <el-divider></el-divider>
    <!--  第一步验证原手机  -->
    <div v-if="active===0" style="margin: 30px auto">
      <p v-if="this.user.phone===null||this.user.phone===''">
        请输入密码：<input v-model="password" type="text" style="height: 20px"/>
      </p>
      <div v-if="this.user.phone!==''&&this.user.phone!==null">
        <p>已绑定手机号 <span v-text="oldPhone.slice(0,3)"></span>
          xxxxxx<span v-text="oldPhone.slice(7)"></span>
          若想换绑请获取免费验证码</p>
        <p>短信验证码: <input type="text" v-model="verificationCode" style="height: 20px">
          <el-button style="margin-left: 30px" size="small" @click="getVerificationCode">免费获取验证码</el-button>
        </p>
      </div>
    </div>
    <!--  第二步 绑定新手机  -->
    <div v-if="active===1" style="margin: 30px auto">
      <p>请输入新手机：<input type="phone" v-model="phone" style="height: 20px"/></p>
    </div>
    <p v-if="active===0||active===1">
      <el-button style="background-color: chocolate;color: #f0f8ff" @click="next">下一步</el-button>
    </p>
    <!--  第三步 修改完成  -->
    <div v-if="active===3">
      <img src="../../../assets/success.png" alt="" style="width: 200px;margin:5% 0 0 37%">
      <h2 style="margin: 5% 0 0 38%">新手机号绑定成功</h2>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import axios from "axios";

export default {
  name: "BindPhoneView",
  data() {
    return {
      oldPhone: '00000000000',
      active: 0,
      phone: '',
      password: '',
      verificationCode: ''
    };
  },
  computed: {
    ...mapState(["user", "userId"])
  },
  mounted() {
    if (typeof (this.user.phone)=="undefined"||this.user.phone==='') {
      axios.get("/user/phone/" + this.userId).then(r => {
        console.log("获取手机号返回数据：")
        console.log(r.data.data)
        if (typeof r.data.data!=="undefined") {
          this.user.phone = r.data.data
          console.log(this.user.phone)
          this.oldPhone = this.user.phone
        }
      }).catch(e=>console.log(e))
    }
    if (this.user.phone!==null&&this.user.phone!=='')
      this.oldPhone = this.user.phone
  },
  methods: {
    next() {
      console.log("当前是第"+this.active+"步")
      //第一步 验证身份
      if (this.active === 0) {
        //原手机号为空 密码验证
        if (this.user.phone === '') {
          axios.get("/user/password/" + this.userId + "/" + this.password).then(r => {
            if (r.data.state === 20000) {
              this.active++
            }
          }).catch(e => console.log(e))
          //原手机号不为空 验证码
        } else {
          axios.get("/user/checkVerificationCode/" + this.user.phone + "/" + this.verificationCode).then(r => {
            if (r.data.state === 20000) {
              this.active++
            }
          }).catch(e => console.log(e))
        }
      }
      //第二步 绑定新手机号
      if (this.active === 1) {
        console.log(this.phone)
        this.user.phone = this.phone
        axios.post("/user/phone/" + this.userId, this.phone).then(r => {
          if (r.data.state === 20000) {
            this.active += 2
          }
        }).catch(e => console.log(e))
      }
    },
    //获取验证码
    getVerificationCode() {
      axios.get("/user/getVerificationCode/" + this.user.phone).then(r => {
        console.log(r.data.data)
      }).catch(e => console.log(e))
    },
    checkIsPhone(phone) {
      let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!reg.test(phone)) {
        console.log(phone)
        this.$message.warning("请输入正确的手机号")
        return
      }
    }
  }
}
</script>

<style scoped>
p {
  text-align: center;
  margin-top: 30px;
}
</style>